<template>
    <div class="body">
      <div class="page-breadcrumb">
        <div class="pannel-title">
          <div>
           漏洞管理 / <font style="color:#4687FF">漏洞详情</font> 
          </div>
        </div>
        <div class="back-btn" v-if="$store.state.breadcrumb.isBack" @click="back">返回</div>
      </div>
      <!-- 详情回填 -->
      <div class="card-body">
        <!-- 单位信息 -->
        <div class="form-card">
          <div class="title">
           
          </div>
          <div class="body" >
            <a-form :model="formState" :label-col="formConfig01.labelCol" :wrapper-col="formConfig01.wrapperCol">
              <a-row>
                <a-col :span="6">
                  <a-form-item label="漏洞名称">
                    <a-input v-model:value="formState.vulnName" readonly/>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="漏洞类型">
                    <a-input v-model:value="formState.vulnTypeName" readonly/>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="漏洞等级">
                    <a-input v-model:value="formState.severityName" readonly/>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="所属单位">
                    <a-input v-model:value="formState.firmName" readonly/>
                  </a-form-item>
                </a-col>
                <!-- 第二排 -->
                <a-col :span="6">
                  <a-form-item label="所属辖区">
                    <a-input v-model:value="formState.psName" readonly/>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="发现时间">
                    <a-input v-model:value="formState.createTime" readonly/>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                </a-col>
                <!-- 第3排 -->
                <a-col :span="6">
                  <a-form-item label="关联资产">
                    <a-input v-model:value="formState.assetValue" readonly />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="关联资产类型">
                    <!-- <a-select v-model:value="formState.severity" disabled>
                      <a-select-option v-for="item in severitys" :key='item' :value="item.id">{{item.name}}</a-select-option>
                    </a-select> -->
                    <a-input v-model:value="formState.assetType" readonly />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="端口">
                    <a-input v-model:value="formState.port" readonly />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
            <a-form :model="formState" :label-col="formConfig03.labelCol" :wrapper-col="formConfig03.wrapperCol" >
              <a-row>
                <a-col :span="24" style="text-align: center;">
                  <a-form-item label="漏洞描述" >
                    <a-textarea style="height:156px" v-model:value="formState.description" readonly />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24" style="text-align: center;">
                  <a-form-item label="输出" >
                    <a-textarea style="height:156px" v-model:value="formState.output" readonly />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
         <!-- 资产 -->
        <div class="form-card">
          <div class="body" >
            <a-form :model="formState" :label-col="formConfig02.labelCol" :wrapper-col="formConfig02.wrapperCol" >
              <a-row>
                <a-col :span="12" >
                  <a-form-item label="CVE编号" >
                    <a-textarea style="height:156px" v-model:value="formState.cve" readonly/>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="CNNVD编号">
                    <a-textarea style="height:156px" v-model:value="formState.cnnvd" readonly/>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
              <a-form :model="formState" :label-col="formConfig03.labelCol" :wrapper-col="formConfig03.wrapperCol" >
              <a-row>
                <a-col :span="24" >
                  <a-form-item label="修复建议" >
                    <a-textarea style="height:156px" v-model:value="formState.solution" readonly />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import httpRequest from "@/util/httpRequest";
import baseUtil from "@/util/baseUtil";
import { useStore } from "vuex";
export default {
  name: "disktop",
  components: {},
  data() {
    return {
      stepsType: 1,
      assets: {},
      vulns: {},
      activeKey: "1",
      severitys: [
        { id: "Low", name: "低危" },
        { id: "Medium", name: "中危" },
        { id: "High", name: "高危" }
      ],
      psIds: [],
      vulnTypes: [
        { id: "Sys", name: "系统漏洞" },
        { id: "App", name: "应用漏洞" }
      ],
      formConfig01: {
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 24
        }
      },
      formConfig02: {
        labelCol: {
          span: 3
        },
        wrapperCol: {
          span: 24
        }
      },
      formConfig03: {
        labelCol: {
          span: 1
        },
        wrapperCol: {
          span: 24
        }
      },
      formState: {
        id: null,
        name: "",
        address: "",
        inspectLevel: "", // High重点企业,Medium普通企业
        status: "", // Enabled开启, Disabled关闭
        natureTypeId: null, //企业性质编号
        natureTypeName: "", // 企业性质名称
        psId: null, // 辖区派出所编号
        psName: "", // 辖区派出所名称
        resDepartment: "",
        contactName: "",
        contactMobile: "",
        contactEmail: "",
        urls: null, // 域名多个时[,]逗号分割
        ips: "", // IP多个时[,]逗号分割
        assetCount: null, // IP和域名总数
        bugCount: null, // 漏洞总数
        inspectCount: null, // 检验总数
        inspectTime: null, // 最后检验时间
        createTime: "",
        editTime: ""
      }
    };
  },
  mounted() {
    const store = useStore();
    store.dispatch("setBreadcrumb", {
      text: "漏洞管理 / 漏洞详情",
      isBack: true
    });
    httpRequest.post("漏洞详情", { id: this.$route.query.id }).then(res => {
      this.formState = res.data;
      let t = {
        stepsType: 1,
        Reported: 2,
        Handled: 3,
        Uploaded: 4,
        Confirmed: 5
      };
      this.stepsType = t[this.formState.status];
      this.formState.vulnTypeName = this.vulnTypes.filter(e=>{return e.id === this.formState.vulnType})[0].name;
      this.formState.severityName = this.severitys.filter(e=>{return e.id === this.formState.severity})[0].name;
    });
  },
  methods: {
    doTheThing: e => {
      console.log(e);
    },
    back(){
      baseUtil.backPage(this);
    }
  }
};
</script>

<style lang="less" scoped>
.body {
  .card-body {
    padding: 30px;
    margin-top: 10px;
    background: #fff;
    .form-card {
      width: 100%;
      text-align: left;
      .title {
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        border-left: 3px solid #4687ff;
        text-align: left;
        padding-left: 10px;
        &-msg {
          font-size: 16px;
        }
        &-btn {
          float: right;
          padding: 5px 15px;
          font-size: 14px;
          background: #4687ff;
          border-radius: 15px;
          color: #fff;
          .icon {
            float: left;
            margin-top: 2px;
            margin-right: 4px;
          }
        }
        &-btnB {
          float: right;
          padding: 5px 15px;
          font-size: 14px;
          border: 1px solid #cccccc;
          border-radius: 15px;
          color: #333333;
          .icon {
            float: left;
            margin-top: 2px;
            margin-right: 4px;
          }
        }
      }
      .body {
        margin-top: 10px;
        .dow-word {
          padding-top: 50px;
          text-align: center;
        }
      }
    }
  }
}
</style>
